<template>
  <div class="main-bg">
    <div class="top"><div class="back thumb" title="返回" @click="back">  <img v-lazy="publicUrl(`/images/back.png`)" /> </div><span>{{data.title}}</span></div>
    <div class="main-detail">
    <div class="main-left">
      <Video
        ref="video"
        @changeSets="changeRouter"
        :videoData="sets"
        :defSets="playIndex"
        :poster="publicUrl(`/images/banner1.jpg`)"
      />
    </div>
    <div class="main-right">
      <div class="title">目录（{{ sets.length }}）</div>
      <div class="main-sets">
        <div
          :class="[
            'sets-part',
            'thumb',
            index === playIndex ? 'play' : 'noPlay',
          ]"
          v-for="(item, index) in sets"
          @click="()=>changSets(index)"
        >
          <div class="sets-title" :title="item.title">
            <div class="play-icon" v-show="index === playIndex">
              <img :src="publicUrl(`/images/play.png`)" />
            </div>
            <span class="les overOneSpec">{{ `${index + 1}.${item.title}` }}</span>
          </div>
          <div class="sets-time">{{ item.time }}</div>
          <div class="play-icon-right" v-show="index === playIndex">
            <img :src="publicUrl(`/images/play-right-icon.png`)" />
          </div>
        </div>
      </div>
    </div>
  </div>
    <div class="bottom">
       <div class="part overOne">
        <span v-for="(item,index) in data.content">{{item.title}}<span v-show="index !== data.content.length -1 ">&nbsp;|&nbsp;</span> </span>
      </div>
       <div class="part">
        <div v-for="(item,index) in data.tag" :style="{...tagColor(index)}" class="tag">{{item.title}}</div>
       </div>
    </div>
  </div>
  
</template>
<script setup lang="ts" name="">
import { ref, computed,watch } from "vue";
import Video from "@/components/Video/index.vue";
import { publicUrl,tagColor } from "@/utils/util";
import { useRoute, useRouter } from "vue-router";
document.documentElement.scrollTop = 0;
const video = ref<InstanceType<typeof Video>>();
  
interface Sets {
  title: string;
  time: string;
  videoUrl: string;
}

const data = ref<{
  title:string;
  content:Array<{title:string}>;
  tag:Array<{title:string}>;
}>({
  title:`短视频直播实战必修课，三招带你了解平台规则`,
  content:[
    {title:`软件测试全程班 `},
    {title:`体验课`},
    {title:`行业分析`},
    {title:`职业发展`},
    {title:`入门指导`},
    {title:`入门指导`},
    {title:`入门指导`},
    {title:`入门指导`},
  ],
  tag:[
    {title:`测试思维 `},
    {title:`测试环境`},
    {title:`测试思维 `},
    {title:`测试环境`},
    {title:`测试思维 `},
    {title:`测试环境`},
    {title:`测试思维 `},
    {title:`测试环境`},
    {title:`测试思维 `},
    {title:`测试环境`},
  ]
});

const sets = ref<Array<Sets>>([
  {
    title: "序章",
    time: "03:03",
    videoUrl: publicUrl(`/video/index1.mp4`),
  },
  {
    title: "第一集",
    time: "00:33",
    videoUrl: publicUrl(`/video/index2.mp4`),
  },
  {
    title: "第二集",
    time: "00:20",
    videoUrl: publicUrl(`/video/index3.mp4`),
  },
  {
    title: "第三集",
    time: "03:03",
    videoUrl: publicUrl(`/video/index1.mp4`),
  },
  {
    title: "第四集",
    time: "00:33",
    videoUrl: publicUrl(`/video/index2.mp4`),
  },
  {
    title: "第五集",
    time: "00:20",
    videoUrl: publicUrl(`/video/index3.mp4`),
  },
  {
    title: "第六集",
    time: "03:03",
    videoUrl: publicUrl(`/video/index1.mp4`),
  },
  {
    title: "第七集",
    time: "00:33",
    videoUrl: publicUrl(`/video/index2.mp4`),
  },
  {
    title: "第八集",
    time: "00:20",
    videoUrl: publicUrl(`/video/index3.mp4`),
  },
  {
    title: "第九集",
    time: "03:03",
    videoUrl: publicUrl(`/video/index1.mp4`),
  },
  {
    title: "第十集",
    time: "00:33",
    videoUrl: publicUrl(`/video/index2.mp4`),
  },
  {
    title: "第十一集",
    time: "00:20",
    videoUrl: publicUrl(`/video/index3.mp4`),
  },
  {
    title: "第十二集",
    time: "00:20",
    videoUrl: publicUrl(`/video/index3.mp4`),
  },
]);
const route = useRoute();
const router = useRouter();
const back = ()=>{
  router.push(`/cloud/courses`);
}
const playIndex = computed((): number => {
  return !route.query.playIndex ||
    !/^[0-9]+.?[0-9]*/.test(route.query.playIndex as string) ||
    Number(route.query.playIndex) > sets.value.length - 1
    ? 0
    : Number(route.query.playIndex);
});

watch(playIndex,(newValue)=> video.value?.changSets(newValue));


const changSets = (index: number) => {
  // playIndex.value = index;

  // video.value?.changSets(index);
  changeRouter(index);
  video.value?.changSets(index);
};

const changeRouter = (index: number) => {
  router.push({
    path: route.path,
    query: {
      playIndex: index,
      cloud_id: route.query.cloud_id,
    },
  });
};

</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./pc.scss";
}
</style>
